<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta name="layout" content="main_pc">
        <title>火堆工作台</title>     
        <link rel="stylesheet" href="${resource(dir: 'css', file: 'user.center.css')}" type="text/css">
        <link rel="stylesheet" href="${resource(dir: 'css_pc', file: 'project.css')}" type="text/css">
        <link rel="stylesheet" type="text/css" href="${resource(dir: 'editerPlugin/simditor-2.2.4/styles', file: 'simditor.css')}" />
    	<link rel="stylesheet" type="text/css" href="${resource(dir: 'editerPlugin/simditor-2.2.4/styles', file: 'app.css')}" />
        <script type="text/javascript" src="${resource(dir: 'editerPlugin/simditor-2.2.4/lib', file: 'module.js')}"></script>
	    <script type="text/javascript" src="${resource(dir: 'editerPlugin/simditor-2.2.4/lib', file: 'hotkeys.js')}"></script>
	    <script type="text/javascript" src="${resource(dir: 'editerPlugin/simditor-2.2.4/lib', file: 'uploader.js')}"></script>
	    <script type="text/javascript" src="${resource(dir: 'editerPlugin/simditor-2.2.4/lib', file: 'simditor.js')}"></script>
		<script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.10.2.js')}"></script>
	    <script type="text/javascript" src="${resource(dir: 'js', file: 'ajaxfileupload.js')}"></script>
	    <script src="${resource(dir: 'js', file: 'bootstrap-datepicker.min.js')}" charset="UTF-8"></script>
	    <link rel="stylesheet" href="${resource(dir: 'css_pc', file: 'bootstrap-datepicker.css')}" type="text/css">
	    <style>
	    div .img{
	    	float: left;
	    	width: 220px; 
	    	min-height: 160px;
	    	background-size: cover;
	    	background-repeat: no-repeat;
	    }
	    div .del-btn{
	        float: left;
	        margin-top: 75px;
	    }
	    div .cover{
	    	display:block;
	    	float: left;
	    	margin-left:20px;
	    	margin-bottom:15px;
	    }
	    </style>
    </head>
<body>

	<div class="container-fluid">

		<section class="quick-navi mb20">
			<div class="container">
				<a href="#" class="quick-link"><span>火堆工作台</span><span
					class="caret"></span></a>
				<!--a href="#" class="quick-link">联系我们</a-->
			</div>
		</section>

		<section>
			<div class="container mb50">
				
				<g:render template="navigate"   model="[status: status]"/>
							

				<div class="right-content" id="rightconsole">

					<div class="launch-container">
                <h3>编辑日志</h3>
                <div class="content">
                    <g:form id = "all-form"  action='saveDiary' method="post"  id="${diaryInstance.id}" class="form-style3">
                        <div class="form-item fix-width">
                            <label for="">标题<span class="tips"></span></label>
                            <div class="form-ctrl">
                                <input type="text" name="title" value='${diaryInstance.title}'/>
                            </div>
                        </div>
                        <div class="form-item fix-width">
                            <label for="">时间<span class="tips"></span></label>
                            <div class="form-tips"></div>
                            <div class="form-ctrl">
                            	<input type="text" class="datepicker" id="datePicker" name="edate">
                            </div>
                        </div>
                        <div class="form-item fix-width">
                        <label for="">文章摘要<span class="tips"></span></label>
                         <div class="form-ctrl">
                                <textarea  name="content" />${diaryInstance.content}</textarea>
                         </div>
                        </div>
                        <div class="form-item fix-width">
                            <label for="">图片<span class="tips"></span></label>
                            <div class="form-tips"></div>
                            <div class="form-ctrl">
                                <div class="img-box btn o no-border">
                                    +点击上传图片
                                    <input type="file" class="upload-cover" name="img-p" id="img-p">
                                </div>
                                <input type="hidden" name="img" id="img" value="">
                            </div>
                        </div>
                        <div class="form-item fix-width">
                        <label for="">预览<span class="tips"></span></label>
                        <div class="form-ctrl" id="imgpic" index="1">
		                        <div class="cover">
		                        	<input type="hidden" name="img" id="img1">
		                            <div id="imgshow1" class="img" style="background-image:url()"></div>
		                        </div>
	                    </div>
                        </div>
                        
                        
                        <div class="form-item">
                            <div class="btn-container">
                                <Button class="btn btn-save-all">保存</Button>
                            </div>
                        </div>
                    </g:form>
                    
                </div>
            </div>                           
            	</div>
                	
                	
			</div>
			<div class="clearboth"></div>
		</section>


	</div>

	<script type="text/javascript">

		$(function() {
			$('#datePicker').datepicker({
			    format: "yyyy/mm/dd"
			});
			$('#datePicker').datepicker('update', '<g:formatDate format="yyyy-MM-dd" date="${diaryInstance.date}"/>');
			$('ul.nav.navbar-nav li').hover(
					function() {
						console.log($(this).index());
						$(this).siblings('.top-active').addClass(
								'position-' + $(this).index());
					},
					function() {
						$(this).siblings('.top-active').removeClass(
								'position-' + $(this).index());
			});

		     $('.img-box').on('change', 'input[type=file]' ,function(){
		         //the url is for test ....
		         posterStates = true;
		         var obj = $(this);
		         var file = obj.attr('id');
		         console.log("request:"+file);
		          $.ajaxFileUpload({  
		     			url:'/scfire/project/imgSaveMb',  
		     			secureuri:false,  
		     			dataType:'text',
		     			fileElementId:file,//file标签的id 
		     			success: function (data, status) { 
					           	if(data=='large'){
					           		showWarn('图片过大');
					           		return;
					           	}
					       		if(data=='format'){
					           		showWarn('图片格式不对');
					           		return;
					           	}
				               //把图片替换  
				               if(data=='fail'){
				               		showWarn('上传失败');
				               }else{
				            	   //图片预览
				            	   
				            	   console.log("return:"+data);
				                   var imageurl = "/scfire/project/imgRead?img="+data;	                   
				                   //图片地址赋值给后台
				                   addNewImgPreview (imageurl, data)
		             
				               }
				           },  
				           error: function (data, status, e) {  
				           },
				          
		     	});
		     });
			//保存
	 		$('.btn-save-all').click(function(){
	 			//save context
	 			var data = editor.getValue();
	 	    	 $("#articleDetail").val(data);
		 		//this.html('saving...');
		 		this.click(function(){});
	 			 //if(!checkNull()){
	 			 	//return;
	 			//}
	 	    	 //console.log(data);
	 	         $("#all-form").submit();
	 	         
	 	    });
			
	 		$('.cover').ready(function(){
	            <g:each in="${diaryInstance.imgs}" var="pic">
	            addImgInfo('${pic}');
	        	</g:each>
	        });
		});


		function removepic(index){
	         $('div.cover [indexValue='+index+']').parent().remove();
	    }
	    function addImgInfo(img){
		    var url = '/scfire/project/imgRead?img='+img;
	    	var imgs = $('#imgpic');

	        var index = parseInt(imgs.attr('index'));
	        
	        imgs.find('.cover:last-child .img').attr("indexValue", index).css('background-image', 'url(' + url + ')');

	        imgs.find('.cover:last-child').find('input[type=hidden]').val(img);
	        imgs.find('.cover:last-child').append('<div class="del-btn"><a class="del" onclick="removepic('+index+')">删除</a></div></div>');
	        var html = '<div class="cover"><input type="hidden" id="img' + index + '" name = "img"><div  class="img" style="background-image:url()"></div>'

	        index++;

	        imgs.attr('index', index).append(html);
		}
		function addNewImgPreview (url, img) {
	        var imgs = $('#imgpic');

	        var index = parseInt(imgs.attr('index'));
	        index++;
	        
	        imgs.find('.cover:last-child .img').attr("indexValue", index).css('background-image', 'url(' + url + ')');

	        imgs.find('.cover:last-child').find('input[type=hidden]').val(img);
	        imgs.find('.cover:last-child').append('<div class="del-btn"><a class="del" onclick="removepic('+index+')">删除</a></div></div>');
	        var html = '<div class="cover"><input type="hidden" id="img' + index + '" name = "img"><div  class="img" style="background-image:url()"></div>'
	        imgs.attr('index', index).append(html);
	    }
		

	</script>

</body>
</html>